<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置一个 el-tree -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 传入内容  插槽里面放的内容就是页面展示的内容 -->
          <!-- 插槽内容 会循环多次  有多少节点 就循环多少次 -->
          <!-- 作用域插槽  slot-scope='obj' 接收传递给插槽的数据 -->
          <!--  slot-scope="{ data }"  这里的 data 表示解构赋值  如果我们写的是 slot-scop = 'obj' 想要取到 data 需要写成 obj.data 写成 {data} 一步到位 直接取到data -->
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          />
        </el-tree>
        <!-- 
          departs  来自下面的 data  里面的数据
          defaultProps 来自于 data 里面的的数据
         -->
      </el-card>
    </div>

    <!-- 放置新增弹层组件 -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @addDepts="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from "./components/tree-tools";
import AddDept from "./components/add-dept";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils";
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {}, // 头部的数据结构
      departs: [],
      defaultProps: {
        label: "name" // 表示 从这个属性显示内容
        // children: "children" // 从这个属性去找子节点
        //  属性名的  label 和 children 是固定写法
        // children  是二级和三级数据的来源
        // label   渲染到页面中的数据就是这个 label 指定的字段

        //  属性值的 children 来自于上面  departs 的 children 字段  要跟 departs 中的内容一致
        //  属性值的 name  来自于上面 departs 中的 name 字段  要跟 departs 中的内容一致
      },
      showDialog: false, // 显示弹出框
      node: null,
      loading: false //  控制进度弹层的显示与隐藏
    };
  },

  created() {
    this.getDepartments(); // 调用自身方法
  },
  methods: {
    async getDepartments() {
      this.loading = true;
      const result = await getDepartments();
      console.log(result);
      //  这里给一个新对象  是因为返回的原始数据中没有 manager 字段，我们需要自己手动拼接
      //  在最根级的 tree-tools 组件中 treenode 没有 id,id 便是 undefind 通过 undefind 进行等值判断是寻找不到根节点的，所以在传值时。将 id 属性设置为 " "
      this.company = { name: result.companyName, manager: "负责人", id: "" };
      //  这里定义一个空字符串，是因为他是根，所有子节点数据的 pid 都是 " "
      this.departs = tranListToTreeData(result.depts, "");
      this.loading = false;
    },
    addDepts(node) {
      this.showDialog = true; // 显示弹层
      // 因为 node 是当前的点击的部门 此时这个部门应该记录下来
      this.node = node;
    },
    editDepts(node) {
      this.showDialog = true; // 显示弹出层
      this.node = node; // 赋值操作的节点

      //  在这里调用获取子组件获取部门详情的方法
      //  类比手动校验可知 父组件想要调用子组件里面的方法 可以通过 this.$refs.dom对象.事件名 来调用
      //  子组件要有 ref 属性
      this.$refs.addDept.getDepartDetail(node.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
